<template>
	<view class="uni-tab-bar">
		<scroll-view class="uni-swiper-tab" scroll-x="true">
			<block v-for="(tab,index) in tabBars" :key="index" :style="scrollStyle">
				<view class="swiper-tab-list" :class="{'active' : tabIndex==index}" @tap="tabtap(index)" :style="scrollItemStyle">
					{{tab.name}} {{tab.num?tab.num:""}}
					<view class="swiper-tab-line"></view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		// data:{
		// 	return{
		// 		tabIndex
		// 	}
		// },
		props: {
			tabBars: Array,
			tabIndex: Number,
			scrollStyle: {
				type: String,
				default: ""
			},
			scrollItemStyle: {
				type: String,
				default: ""
			}
		},
		methods: {
			//点击切换导航
			tabtap(index) {
				// console.log(index)
				// this.tabIndex = index;
				this.$emit('tabtap', index)
			}
		}
	}
</script>　

<style scoped>
	/* 文字导航开始 */
	.uni-swiper-tab {
		height: 86rpx;
		text-align: center;
		font-size: 4vw;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		line-height: 90rpx;
		white-space: nowrap;
		z-index: 99;
	}

	.swiper-tab-list {
		color: #000000;
		width: 17%;
		text-align: center;
		display: inline-block;

	}

	.uni-tab-bar .active {
		color: #FD6531;
	}

	/* 文字导航结束 */
</style>